<template>
  <el-drawer v-model="dialogFormVisible" :with-header="false" size="87%">
    我的优惠卷
    <el-container class="layout-container-demo">
      <el-main>
        <el-scrollbar>
          <el-checkbox-group v-model="chooseCouponList">
            <el-table :data="tableData">
              <el-table-column prop="id" label="优惠卷编号" />
              <el-table-column prop="shopId" label="店铺id" />
              <el-table-column prop="rule" label="规则类型" />
              <el-table-column prop="ruleDetail" label="规则细节" />
              <el-table-column prop="time" label="有效期" width="120" />
              <el-table-column prop="enable" label="未使用" />
              <el-table-column label="操作" width="120">
                <template #default="scope">
                  <el-checkbox :label="scope.row" size="large" v-if="1 == comparisonConditions(scope.row)"
                    border>选择</el-checkbox>
                  <el-button disable v-if="2 == comparisonConditions(scope.row)" border>已使用</el-button>
                  <el-button disable v-if="3 == comparisonConditions(scope.row)" border>不满足</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-checkbox-group>
        </el-scrollbar>
      </el-main>
    </el-container>
    <el-button @click="openOrderDialog">去下单</el-button>

    <order-create ref="orderCreateRef" />
  </el-drawer>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { getCouponByJwt } from "../../api/coupon/"
import { ElContainer, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
import { mainStore } from "../../store/index";
const store = mainStore();
import orderCreate from './OrderCreate.vue'

// 选择下单使用的地址
const chooseCouponList = ref([])

// 打开本CouponChoose页
const dialogFormVisible = ref(false)
const openDialog = () => {
  dialogFormVisible.value = true
}
defineExpose({
  openDialog
})

watch(chooseCouponList, (newVal, oldVal) => {
  store.chooseCouponList = chooseCouponList.value
}, {
  // 深度监听
  deep: true,
  // 监听对象初次加载时也调用一次方法体
  // immediate: true
})

//满减条件比较决定按钮显示
const totalPayment = store.totalPayment
const comparisonConditions = (coupon: any) => {
  // 满减
  if (coupon.rule == 3) {
    if (totalPayment > coupon.ruleDetail.split('-')[0]) {
      return 1
    } else {
      return 3
    }
  }
  //免单 折扣
  if (coupon.enable == 1) {
    return 1
  } else {
    return 2
  }

}

// 打开创建订单页面
const orderCreateRef = ref()
const openOrderDialog = () => {
  //子组件方法
  orderCreateRef.value.openDialog();
}

// 获取我的优惠卷
const coupon = getCouponByJwt({})
let tableData = ref([])
coupon.then((res) => {
  if (res.code === 200) {
    tableData.value = res.data
  } else {
    return ElMessage({
      showClose: true,
      message: '请重新登录',
      type: 'error',
    })
  }
})

</script>
  
<style scoped lang="scss">
.layout-container-demo {
  padding: 0 0;

  .el-main {
    padding: 0 0;

    .el-radio-group {
      width: 100%;
    }
  }
}
</style>
  